<template>
  <div>
    <el-descriptions title="商品详细信息">
      <el-descriptions-item label="skuId">{{ItemVo.skuEntity.skuId}}</el-descriptions-item>
      <el-descriptions-item label="spuId">{{ItemVo.skuEntity.spuId}}</el-descriptions-item>
      <el-descriptions-item label="sku名称">{{ItemVo.skuEntity.skuName}}</el-descriptions-item>
      <el-descriptions-item label="sku介绍描述">{{ItemVo.skuEntity.skuDesc}}</el-descriptions-item>
      <el-descriptions-item label="所属分类id">{{ItemVo.skuEntity.catalogId}}</el-descriptions-item>
      <el-descriptions-item label="所属品牌id">{{ItemVo.skuEntity.brandId}}</el-descriptions-item>
      <el-descriptions-item label="默认图片">{{ItemVo.skuEntity.skuDefaultImg}}</el-descriptions-item>
      <el-descriptions-item label="标题">{{ItemVo.skuEntity.skuTitle}}</el-descriptions-item>
      <el-descriptions-item label="副标题">{{ItemVo.skuEntity.skuSubtitle}}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ItemVo.skuEntity.price}}</el-descriptions-item>
      <el-descriptions-item label="销量">{{ItemVo.skuEntity.saleCount}}</el-descriptions-item>
      <el-descriptions-item label="sku图片信息">{{ItemVo.skuImageEntities.skuImageEntities}}</el-descriptions-item>
      <el-descriptions-item label="spu描述信息">{{ItemVo.spuDescEntity.decript}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="sku属性信息" v-for="attrVo in ItemVo.attrVoList ">
      <el-descriptions-item label="属性名">{{attrVo.attrName}}</el-descriptions-item>
      <el-descriptions-item label="属性值">{{attrVo.attrValue}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="spu属性信息" v-for="spuAttrValue in ItemVo.spuAttrValueEntities">
      <el-descriptions-item label="属性名">{{spuAttrValue.attrName}}</el-descriptions-item>
      <el-descriptions-item label="属性值">{{spuAttrValue.attrValue}}</el-descriptions-item>
    </el-descriptions>
    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    <el-button @click="addCart()">加入购物车</el-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import axios from 'axios'
import {InfoSkuId} from "../../../api/product/product/product";
import {addCart} from "../../../api/cart/cart";
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        ItemVo:{
          skuEntity: {
            skuId:0,
            spuId:0,
            skuName:"",
            skuDesc:"",
            catalogId:0,
            brandId:0,
            skuDefaultImg:"",
            skuTitle:"",
            skuSubtitle:"",
            price:0,
            saleCount:0,
          },
          skuImageEntities:[],
          spuDescEntity:{
            decript:""
          },
          attrVoList:[
            {
              attrId:null,
              attrName:"",
              attrValue:""
            }
          ],
          spuAttrValueEntities:[
            {
              attrId:null,
              attrName:"",
              attrValue:""
            }
          ]
        },
        num:null,

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      addCart(){
        let skuId = this.$route.params.skuId;
        var skuIdAndNum = skuId+','+this.num
         addCart(skuIdAndNum).then(res=>{
            this.$message.success(res.msg);
           this.$router.push({name: 'Cart'});
         })
      },
      handleChange(value) {
        console.log(value);
      },
      getInfo(){
        let skuId = this.$route.params.skuId;
        InfoSkuId(skuId).then(res=>{
          this.ItemVo = res.data;
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
